<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { UserDto, UserVo } from '@/type/User'
import { useRoute, useRouter } from 'vue-router'
import SButtonList from '@/components/SButtonList.vue'
import type { MenuVo } from '@/type/Menu'
import { addUserApi, updateUserApi, userInfoApi } from '@/api/user-api'
import type { ResultData } from '@/api/service'
import defaultAvatar from '@/assets/default-avatar.jpg'
import { ElNotification } from 'element-plus'
import { useMenuStore } from '@/stores/menu'

const route = useRoute()
const menuStore = useMenuStore()

const router = useRouter()

const top: MenuVo[] = route.meta.topButton as MenuVo[]
// 添加返回按钮
const topButton: MenuVo[] = []
topButton.push(...top)
topButton.push({
  createBy: '',
  gmtCreate: '',
  gmtModify: '',
  isFrame: 0,
  menuId: '',
  menuType: '',
  modifyBy: '',
  orderNum: 0,
  parentId: '',
  path: '',
  perms: '',
  remark: '',
  status: 0,
  visible: 0,
  menuName: '返回',
  component: 'back',
  icon: '#',
  btnType: 'info'
})

const userForm = ref<UserVo>({
  avatar: '',
  createBy: '',
  email: '',
  gmtCreate: '',
  gmtModify: '',
  modifyBy: '',
  nickname: '',
  sign: '',
  status: 0,
  userId: '',
  username: ''
})
const userPassword = ref<string>("")
// 标识, true 表示新增 false 表示修改
const status = ref<boolean>(true)

const methods = {
  save: () => {
    const param: UserDto = {
      avatar: userForm.value.avatar,
      nickname: userForm.value.nickname,
      username: userForm.value.username,
      password: userPassword.value,
      sign: userForm.value.sign,
      email: userForm.value.email,
      status: userForm.value.status
    }
    if (status.value) {
      // 新增
      addUserApi(param).then(() => {
        ElNotification.success({
          title: '成功',
          message: '新增用户',
          type: 'success'
        })
      })
    } else {
      // 修改用户信息
      updateUserApi(userForm.value.userId, param).then(() => {
        ElNotification.success({
          title: '成功',
          message: '更新用户',
          type: 'success'
        })
      })
    }
    // 执行返回方法
    methods.back()
  },
  back: () => {
    // 返回用户管理页面
    menuStore.closeTabOfPath(route.fullPath)
    router.push({ path: '/user' })
  }
}

onMounted(() => {
  const userId = route.query.userId as string

  if (userId !== undefined) {
    // 页面传递userId, 调用接口查询数据回显
    userInfoApi(userId).then((response: ResultData<UserVo>) => {
      userForm.value = response.data
      status.value = false
    })
  }
})
</script>

<template>
  <s-button-list :methods="methods" :link="false" :row-data="null" :button-list="topButton" />
  <el-card shadow="never" style="margin-top: 20px">
    <el-form :model="userForm" label-width="auto" style="margin-top: 15px">
      <el-form-item label="头像">
        <el-avatar size="large" :src="userForm.avatar === '' ? defaultAvatar : userForm.avatar" />
      </el-form-item>

      <el-form-item label="用户名称">
        <el-input :disabled="!status" v-model="userForm.username" />
      </el-form-item>

      <el-form-item label="用户昵称">
        <el-input v-model="userForm.nickname" />
      </el-form-item>

      <el-form-item label="密码">
        <el-input type="password" disabled v-model="userPassword" />
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="userForm.email" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="userForm.status">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="签名">
        <el-input v-model="userForm.sign" />
      </el-form-item>

      <el-form-item label="创建时间">
        <el-input disabled v-model="userForm.gmtCreate" />
      </el-form-item>

      <el-form-item label="修改时间">
        <el-input disabled v-model="userForm.gmtModify" />
      </el-form-item>

      <el-form-item label="创建人">
        <el-input disabled v-model="userForm.createBy" />
      </el-form-item>

      <el-form-item label="修改人">
        <el-input disabled v-model="userForm.modifyBy" />
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped></style>